vue

您所在的位置：网站首页 › vue router传参query › vue

vue

2024-07-16 03:51| 来源: 网络整理| 查看: 265

vue-router路由中对query中的参数进行加密

源码地址在文末

在创建路由的时候，添加两个方法

stringifyQuery: 序列化传入的query参数，方法可以接收一个对象参数

在new Router的时候传递这个属性，在序列化query参数的就执行这个方法，不会执行默认的方法，序列化后在地址栏显示序列化之后的参数

parseQuery: 解析地址栏参数，方法接收一个字符串参数

在new Router的时候传递这个属性，在解析query参数的时候，回执行这个方法，不会在执行默认的方法，

注：这个方法只解析path中的参数，或者浏览器刷新的时候的地址栏的参数，不会对在query参数对处理，如：

```javascript this.$router.push({ path: "foo?a=123", query: { b: 345 } }) ```

在执行这段代码的时候，parseQuery方法不会对query:{b: 345}进行解析,会解析path:"foo?a=123"中的a=123的字符串

使用方式：

例：

router/index.js import Vue from "vue" import VueRouter from "vue-router"; import { stringifyQuery, parseQuery } from "./utils/query"; Vue.use(VueRouter); const routes = [ { path: "/", name: "home", component: () => import(/* webpackChunkName: "home" */"../views/Home") }, { path: "/foo", name: "foo", component: () => import(/* webpackChunkName: "foo" */"../views/Foo") }, { path: "/bar", name: "bar", component: () => import(/* webpackChunkName: "bar" */"../views/Bar") } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, stringifyQuery: stringifyQuery, parseQuery: parseQuery, routes }); export default router router/utils/query.js import { getEncryptToBase64 as encrypt, getDecryptByBase64 as decrypt } from "./encryption" const encodeReserveRE = /[!'()*]/g const encodeReserveReplacer

【本文地址】

vue

vue

今日新闻

推荐新闻